<template>
    
    <div id="car-container">

<!-- 商品区域 -->
<div class="mui-card" id="mui-card">
				<div class="mui-card-content" v-for="(item,i) in  getcountlist" :key="i">
					<div class="mui-card-content-inner" id="mui-card-content-inner">
                         <mt-switch v-model="$store.getters.getselect[item.id]" @change="undateswich(item.id,$store.getters.getselect[item.id])" > </mt-switch>   
                         <img  :src="item.url" alt="">
                           <div class="shang-car-info">
                        <h3>小米（Mi）小米note 16G全网通</h3>
                        <p>
                            <span class="price">￥{{$store.getters.getprice[item.id]}}</span>
                            <carNumberbox :initcount="$store.getters.getidcount[item.id]" :goodsinfoid="item.id"></carNumberbox>
                            <a href="" @click.prevent="remove(item.id,i)">删除</a>
                        </p>
                    </div>
					</div>
                  
				</div>
			</div>

<!-- 结算区域 -->
<div class="mui-card" id="mui-card2">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <div class="left">
              <p>  总计(不含运费) </p>
              <p>已勾选   <strong>{{$store.getters.getaccounts.count}}</strong> 件，总价<strong>￥{{$store.getters.getaccounts.account}}</strong></p>
            </div>

            <mt-button size="small" type="danger">去结算</mt-button>
             
					</div>
				</div>
			</div>
 <p>{{$store.getters.getselect}}</p>


    </div>


</template>

<script>
import carNumberbox from "../subinfo/car_numberbox.vue";
export default {
  data() {
    return {
      getcountlist: []
    };
  },
  created() {
    this.getgoodslist();
  },

  methods: {
    //swich开关更替
    undateswich(id, val) {
      this.$store.commit("undateswichinfo", { id: id, selected: val });
    },

    //删除 getcountlist 数据
    remove(id, i) {
      this.getcountlist.splice(i, 1);
      this.$store.commit("removeCar", id);
    },

    getgoodslist() {
      var idArr = [];
      this.$store.state.car.forEach(item => {
        this.$http
          .get("https://www.apiopen.top/meituApi?page=" + parseInt(item.id))
          .then(res => {
            //字面量
            // var objidurl = {
            //   id: item.id,
            //   url: res.body.data[0].url
            // };
            //字面量点
            var objidurl = {};
            objidurl.id = item.id;
            objidurl.url = res.body.data[0].url;
            idArr.push(objidurl);
          });
        if (idArr.length <= 0) {
          return;
        }
      });
      this.getcountlist = idArr;
    }
  },
  components: {
    carNumberbox
  }
};
</script>

<style lang="less">
#car-container {
  background-color: #ccc;
  overflow: hidden;
  #mui-card {
    .mint-switch {
      margin-right: 6px;
    }

    img {
      display: flex;
      justify-content: space-between;
      width: 60px;
      height: 60px;
    }
    h3 {
      font-size: 13px;
    }
    .shang-car-info {
      .mui-numbox {
        height: 30px;
      }

      .price {
        color: red;
        font-weight: 400px;
      }
    }
  }
  .mui-card-content-inner {
    display: flex;
    align-items: center;
    padding: 5px;
  }
}

#mui-card2 {
  .mui-card-content-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  p {
    margin: 0;
  }
  p:nth-child(1) {
    padding-top: 15px;
  }
  p:nth-child(2) {
    padding-bottom: 15px;
  }

  strong {
    color: red;
  }
}
</style>
